<template>
  <div class="bookshelf-box">
    <common-header :tittle="tittle"></common-header>
    <van-grid :border="false" :column-num="3">
      <van-grid-item v-for="book in books" :key="book.index">
        <div class="book-item">
          <div class="book-item-image-box" @click="readBook(book)">
            <img :src="book.titlePage" />
          </div>
          <div class="book-item-name-box">{{ book.name }}</div>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
// import { mapMutations, mapGetters, mapState } from 'vuex'
import commonHeader from '@/components/common-header'
// import * as homeApi from 'api/home-api'
// import { ERR_OK } from 'config/index'
// import mock from '@/mock/books.json'
import api from '@/fetch/api.js'

export default {
  data () {
    return {
      tittle: '我的书架',
      books: []
    }
  },
  created () {
    this.listMyBooks()
  },
  methods: {
    listMyBooks () {
      api.myBookshelf({}).then(resp => {
        if (resp.status === 200 && resp.data.code === 200) {
          this.books = resp.data.data
        }
      }).catch(err => {
        console.log('load books error')
        console.log(err)
      })
    },
    readBook (book) {
      console.log(book)
      this.$router.togo({
        name: 'reader',
        query: {
          bookCode: book.code
        }
      })
    }
  },
  components: {
    commonHeader
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "~@/styles/index.less";
@import "~@/styles/variable.less";
.bookshelf-box {
  background-color: white;

  .van-grid {
    margin: 0px 15px;
  }

  .book-item {
    background-color: white;
    height: 160px;

    .book-item-image-box {
      height: 134px;
      width: 100%;

      img {
        height: 132px;
      }
    }
    .book-item-name-box {
      font-size: 12px;
    }
  }
}
</style>
